
header {
    height: 50px;
    width: 100%;
    background: linear-gradient(#4f4d72,#7b7fa3);

}
main {
    margin-top: 10px;
}
main .inner {
    width: 1200px;
    height: calc(100vh - 110px);
    margin: 0 auto;

}

main .inner-left {
    float: left;
}

main .inner-left img {
    height: 400px;
    animation: showImg .5s linear;
}

@keyframes showImg {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

main .inner-right {
    float: right;
    width: 800px;
}

main .inner-right h1 {
    margin: 30px auto;
    margin-left: 350px;
    font-size:24px ;
}

#canvas {
    display: inline-block;
    border:1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
}

footer p{
    height: 50px;
    width: 100%;
    background: linear-gradient(#4f4d72,#7b7fa3);
    text-align: center;
    line-height: 50px;
    color: #fff;
}